<template>
  <view
    class="login-page flex flex-col px-6"
    :style="`padding-top: ${safeareaTop <= 60 ? safeareaTop + 40 : safeareaTop}rpx`"
  >
    <view class="w-full flex items-center mb-8">
      <wd-icon name="arrow-left1" @click="backTo" size="22px"></wd-icon>
    </view>

    <text class="w-[100%] text-center text-2xl font-bold text-gray-900 my-2"
      >欢迎回来！</text
    >
    <view class="w-[100%] flex justify-center items-center mb-10 mt-6">
      <text class="text-sm text-gray-500 mr-1">还没有账号吗?</text>
      <text class="text-sm text-blue-500 font-medium">点下方注册吧</text>
    </view>

    <view class="mb-4">
      <text class="text-sm text-gray-700">电话号码</text>
      <input
        v-model="formData.phone"
        type="text"
        placeholder="XXX XXXX XXXX"
        class="input-box"
      />
    </view>

    <view class="mb-2" v-if="!isLogin">
      <text class="text-sm text-gray-700">邮箱</text>
      <input
        v-model="formData.email"
        type="email"
        placeholder="xxx@xxx.com"
        class="input-box"
      />
    </view>

    <view class="mb-2">
      <text class="text-sm text-gray-700">密码</text>
      <input
        v-model="formData.password"
        type="password"
        placeholder="请输入密码"
        class="input-box"
      />
    </view>

    <button class="login-btn mb-8 mt-6" @click="onSubmit">提交</button>

    <view class="flex items-center mb-6">
      <view class="flex-1 h-px bg-gray-300"></view>
      <text class="text-sm text-gray-500 mx-2">选择后开始</text>
      <view class="flex-1 h-px bg-gray-300"></view>
    </view>

    <view class="flex justify-center space-x-4">
      <button
        class="third-btn border border-gray-200"
        @click="changeFrom('login')"
      >
        <text class="text-red-500">L</text>
        <text class="ml-2 text-gray-700">登录</text>
      </button>
      <button
        class="third-btn border border-gray-200"
        @click="changeFrom('register')"
      >
        <text class="text-blue-600">R</text>
        <text class="ml-2 text-gray-700">注册</text>
      </button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import useStore from '@/store'
import { computed, ref, reactive } from 'vue'
import { backTo, jumpTo } from '@/utils/unifunc'
import { register, login } from '@/api/user'
const store = useStore()

const isLogin = ref(true)

const safeareaTop = computed(() => {
  return store.useSafeArea.getSafeAreaTop
})

const formData = reactive({
  phone: '',
  email: '',
  password: ''
})

const changeFrom = (type: 'login' | 'register') => {
  isLogin.value = type === 'login'
}

const onSubmit = async () => {
  if (isLogin.value) {
    const res = await login<any, IUser>(formData)
    if (res.code === 200) {
      store.useUser.setUser(res.data)
      jumpTo('/pages/my/myPage')
    }
  } else {
    const res = await register(formData)
    if (res.code === 200) {
      uni.showToast({
        title: '注册成功',
        icon: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  .input-box {
    width: 90%;
    height: 48px;
    margin: 0 auto;
    border-radius: 12px;
    background: #fff;
    padding: 0 12px;
    margin-top: 6px;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  }

  .login-btn {
    width: 100%;
    height: 52px;
    line-height: 52px;
    border-radius: 26px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(to right, #4f7dfd, #3bb2ff);
  }

  .third-btn {
    flex: 1;
    height: 44px;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  }
}
</style>
